<template>
	<div class="whole">
		<div class="dia">
			<van-search v-model="terminalSn" placeholder="请输入终端编号" shape="round" :show-action="showAction"
				@search="onSearch" @input="onInput" @clear="onSearch" class="search">
			</van-search>
			<div class="" @click="onSearch">
				搜索
			</div>
		</div>
		<!-- <div class="" style="position: fixed;width: 100%;background-color: #fff;z-index: 999;">
			<div class="">
				<van-field v-model="defaultValue" label="起始号开始" placeholder="请输入终端编号" />
			</div>
			<div class="">
				<van-field v-model="defaultValue" label="起始号结束" placeholder="请输入终端编号" />
			</div>
			<div class="">
				<van-cell-group :border="false">
					<van-field readonly is-link v-model="cardType" label="代理商" placeholder="请选择代理商"
						@click="$toast('cardList')" />
				</van-cell-group>
			</div>
			<div class="">
				<van-cell-group :border="false">
					<van-field readonly is-link v-model="cardType" label="选择划拨方式" placeholder="请选择划拨方式"
						@click="$toast('cardList')" />
				</van-cell-group>
			</div>
		</div> -->
		
		<div class="wrapperCenter">
			<div class="content">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
					<van-checkbox-group v-model="terList">
						<empty v-if="!list.length"></empty>
						<div class="dis" v-for="(item,index) in list" :key="index">
							<div class="main" :class="index!=0?'main_top':''">
								<van-checkbox :name="item.terminalSn" shape="round" checked-color="#FF2828">
									<div class="main_d">

										<div class=""
											style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
											<div class="">
												<div class="institution">
													机构:{{channelName}}
												</div>
												<!-- <div class="condition">
													唤醒状态：<span v-if="item.activationStatus==0">未唤醒</span>
													<span v-else-if="item.activationStatus==1">已唤醒</span>
												</div> -->
												<div class="condition">
													终端编号:{{item.terminalSn}}
												</div>
												<!-- <div class="condition">
													绑定状态:<span v-if="item.terminalStatus==0">入库</span>
													<span v-else-if="item.terminalStatus==1">下拨</span>
													<span v-else-if="item.terminalStatus==2">绑定</span>
													<span v-else-if="item.terminalStatus==3">解绑</span>
												</div> -->
												<div class="condition">
													费 率:{{item.creditCardTrate}}
												</div>
											</div>



										</div>
										<img src="@/assets/terminal/HK.png" alt=""
											v-if="channelCode=='CHANNEL_POS_HK_SD'" />
										<img src="@/assets/terminal/LS.png" alt=""
											v-if="channelCode=='CHANNEL_POS_LS_SD'" />
									</div>
								</van-checkbox>
							</div>
						</div>
					</van-checkbox-group>
				</van-list>
			</div>
		</div>

		<div class="wrapperBottom" v-if="list.length">
			<div class="left">
				<van-checkbox @change="checkedAllClick" v-model="checkedAll">全选</van-checkbox>
			</div>
			<div class="" style="display: flex;align-items: center;color: #FF2828;" @click="navUrl('/incept')">
				起始划拨
			</div>
			<div class="right" @click="goBank">已选择{{ terList.length }}台</div>
		</div>
	</div>
</template>

<script>
	import {
		selectTerTranList
	} from '@/api/terminal'
	import store from '@/store'

	import {
		showToast
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRoute()
			const routers = useRouter()
			const state = reactive({
				agentNo: "",
				showAction: false,
				terList: [],
				pageStart: 1,
				pageSize: 20,
				loading: false,
				finished: false,
				list: [],
				channelCode: "",
				checkedAll: false,
				channelName: "",
				terminalSn: ""
			})
			//全选按钮
			const checkedAllClick = e => {
				state.terList = []
				if (e) {
					state.list.forEach(item => {
						console.log(e)
						state.terList.push(item.terminalSn)
					})
				}
			}
			const onSearch = () => {
				state.pageStart = 1
				state.list = []

				getList()
			}

			//调拨活动终端
			const goBank = () => {
				if (state.terList.length != 0) {
					routers.push({
						path: "terminalList",
						query: {
							channelCode: router.query.channelCode,
							terList: state.terList
						}
					})
				} else {
					showToast('请先选择终端')
				}

				// router.push({
				// 	path: url,
				// 	query: {
				// 		channelCode: state.tabList[state.active].channelCode,
				// 		activityId:state.tabList[state.active].activityId
				// 	}
				// })
			}
			const navUrl=(e)=>{
				routers.push({
					path: e,
					query: {
						channelCode: router.query.channelCode,
						// terList: state.terList
					}
				})
			}
			//获取数据
			const getList = () => {
				state.channelCode = router.query.channelCode
				state.channelName = router.query.channelName
				let parames = {
					agentNo: state.agentNo,
					channelCode: router.query.channelCode,
					// terminalSn:state.terminalSn,
					pageStart: state.pageStart,
					pageSize: state.pageSize
				}
				if (state.terminalSn != '') {
					parames.terminalSn = state.terminalSn
				}
				selectTerTranList(parames).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 20) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false
					}

				})
			}
			return {
				...toRefs(state),
				getList,
				onSearch,
				checkedAllClick,
				goBank,
				navUrl
			}
		}
	})
</script>
<style scoped lang="scss">
	.whole {
		height: 100vh;
		background-color: #fff;
		overflow-y: auto;

		.search {
			width: 328px;
			// position: fixed;
			// top: 0;
		}

		.wrapperCenter {
			height: 100vh;
			// margin-top: 200px;
			overflow: scroll;

			.content {

				// padding-bottom:50px;
				// box-sizing: border-box;
				.main {
					width: 339px;
					// height: 144px;
					background: #FFFFFF;
					box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
					border-radius: 6px;
					padding: 10px 10px;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 12px;
					color: #333333;
					margin-top: 12px;

					img {
						width: auto;
						height: 30px;
					}

					.main_d {
						width: 280px;
						display: flex;
						justify-content: space-between;
					}

					.institution {
						margin-top: 2px;
						margin-left: 12px;
					}

					.condition {
						margin-top: 4px;
						margin-left: 12px;
					}
				}
			}
		}

		.wrapperBottom {
			padding: 14px;
			position: fixed;
			width: 100%;
			bottom: 0;
			background: #ffffff;
			opacity: 1;
			border-radius: 0px;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
			}

			.right {
				// width: 73px;
				// height: 21px;
				background: #FF2828;
				border-radius: 14px;
				padding: 6px 8px;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: #ffffff;
				// border-radius: 5px;
			}
		}
	}

	::v-deep .van-search__content {
		background-color: #EDF5FF !important;
	}
</style>